<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/userCenter.css">
  <style lang="">
  </style>
  <title>修改电话号码</title>
</head>

<body class="userCenter page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <div class="list-block">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-media">
                <i class="icon icon-form-phone"></i>
              </div>
              <div class="item-inner">
                <div class="item-title label">旧号码</div>
                <div class="item-input oldPhone">
                  <input type="text" placeholder="输入旧手机号码" onblur="changePhone.changeInput('changePhone','oldPhone')">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media">
                <i class="icon icon-form-phone"></i>
              </div>
              <div class="item-inner">
                <div class="item-title label">新号码</div>
                <div class="item-input newPhone">
                  <input type="text" placeholder="输入新手机号码" onblur="changePhone.changeInput('changePhone','newPhone')">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media">
                <i class="icon icon-form-code"></i>
              </div>
              <div class="item-inner">
                <div class="item-title label">验证码</div>
                <div class="item-input code">
                  <input type="text" placeholder="输入验证码" onblur="changePhone.changeInput('changePhone','code')">
                </div>
                <a href="#" class="button button-big button-fill button-success" id="getCodeBtn" onclick="changePhone.getCodeFunc()">获取验证码</a>
              </div>
            </div>
          </li>
        </ul>
        <div class="row btn-group" style="margin-top:20px;">
          <div class="col-50">
            <a href="#" class="button button-big button-fill button-danger" onclick="changePhone.cancel()">取消</a>
          </div>
          <div class="col-50">
            <a class="button button-big button-fill button-success" onclick="changePhone.http('updatePhone')">确认</a>
          </div>
        </div>
      </div>
    </div>

    <div id="modal">
      <input type="file" id="input-file" name="file" onchange="info.changeFile(this)">
      <form id="form-upload" enctype="multipart/form-data">
      </form>

    </div>
    <!-- 标题栏 -->

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var changePhone = (function ($) {
    $.init()
    var changePhone = new ST({
      golbalHeaderText: '修改手机',
      golbalHeaderFunc: function () {
        window.history.back()
      },
      changePhone:{
        oldPhone:'',
        newPhone:'',
        code:''
      },
      getCode:{
        phone:''
      },
      getCodeTime:null

    })
    changePhone.cancel = function () {
      window.history.back()
    }
    changePhone.getCodeFunc = function () {
      this.getCode.phone = this.changePhone.oldPhone
      changePhone.http('getCode')
    }
    changePhone.pushAjax({
      getCode:{
        url:'/app/api/public/sms/sendSms',
        data:changePhone.getCode
      },
      updatePhone:{
        url:'/app/api/private/user/updatePhone',
        data:changePhone.changePhone
      }
    })
    changePhone.pushAjaxSuccess({
      getCode:function (res) {
        $.toast(res.msg)
        if(changePhone.getCodeTime) {
          clearInterval(changePhone.getCodeTime)
        }
        if(res.code == 1) {
          $('#getCodeBtn').removeClass('button-success').addClass('disabled').text('60s')
          var second = 60
          $('#getCodeBtn')[0].onclick = null
          changePhone.getCodeTime = setInterval(function () {
            if(second == 0) {
              $('#getCodeBtn')[0].onclick = function () {
                changePhone.getCodeFunc()
              }
              $('#getCodeBtn').removeClass('disabled').addClass('button-success').text("获取验证码")
              second = 60
              clearInterval(changePhone.getCodeTime)
              return
            }
            second -= 1
            $('#getCodeBtn').text(second+'s')
          },1e3)
        }
      },
      updatePhone:function (res) {
        $.toast(res.msg)
        if(res.code === '1') {
          setTimeout(() => {
            window.location.href = './userCenter.html'
          }, 1e3);
        }
      }
    })
    changePhone.render()
    return changePhone
  })($)
</script>

</html>